<template>
  <div class="mobile-media-grid">
    <!-- 筛选栏 -->
    <div v-if="showFilters" class="filter-bar">
      <div class="filter-tabs">
        <button
          v-for="filter in filterTabs"
          :key="filter.value"
          :class="{ active: activeFilter === filter.value }"
          class="filter-tab"
          @click="setFilter(filter.value)"
        >
          <component :is="filter.icon" />
          <span>{{ filter.label }}</span>
        </button>
      </div>

      <div class="filter-actions">
        <button class="filter-btn" @click="toggleSort">
          <tiny-icon-sort />
          {{ sortOptions.find(s => s.value === currentSort)?.label }}
        </button>
        <button class="filter-btn" @click="toggleView">
          <component :is="viewMode === 'grid' ? 'tiny-icon-list' : 'tiny-icon-grid'" />
        </button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="loading-skeleton">
        <div
          v-for="i in 6"
          :key="i"
          :class="viewMode"
          class="skeleton-item"
        ></div>
      </div>
    </div>

    <!-- 媒体网格 -->
    <div
      v-else-if="mediaFiles.length > 0"
      :class="[viewMode, { 'selection-mode': selectionMode }]"
      class="media-grid"
    >
      <div
        v-for="(file, index) in mediaFiles"
        :key="file.fileId"
        :class="{
          selected: selectedFiles.includes(file.fileId),
          'has-ai-tags': file.aiTags
        }"
        :style="{ '--delay': index * 0.05 + 's' }"
        class="media-item"
        @click="handleItemClick(file, index)"
        @touchend="handleTouchEnd"
        @touchstart="handleTouchStart(file, $event)"
      >
        <!-- 选择框 -->
        <div v-if="selectionMode" class="selection-checkbox">
          <div :class="{ checked: selectedFiles.includes(file.fileId) }" class="checkbox-inner">
            <tiny-icon-check v-if="selectedFiles.includes(file.fileId)" />
          </div>
        </div>

        <!-- 媒体预览 -->
        <div class="media-preview">
          <!-- 图片预览 -->
          <img
            v-if="file.fileType === 'image'"
            :alt="file.originalFileName"
            :src="file.thumbnailUrl || file.fileUrl"
            class="media-image"
            loading="lazy"
            @error="handleImageError"
          />

          <!-- 视频预览 -->
          <div v-else-if="file.fileType === 'video'" class="video-preview">
            <img
              v-if="file.thumbnailUrl"
              :alt="file.originalFileName"
              :src="file.thumbnailUrl"
              class="video-thumbnail"
              loading="lazy"
            />
            <div v-else class="video-placeholder">
              <tiny-icon-video />
            </div>
            <div v-if="file.duration" class="video-duration">
              {{ formatDuration(file.duration) }}
            </div>
            <div class="play-overlay">
              <tiny-icon-play />
            </div>
          </div>

          <!-- 音频预览 -->
          <div v-else-if="file.fileType === 'audio'" class="audio-preview">
            <div class="audio-icon">
              <tiny-icon-music />
            </div>
            <div class="audio-waveform">
              <div v-for="i in 5" :key="i" class="wave-bar"></div>
            </div>
            <div v-if="file.duration" class="audio-duration">
              {{ formatDuration(file.duration) }}
            </div>
          </div>

          <!-- 文档预览 -->
          <div v-else class="document-preview">
            <div :class="file.fileFormat" class="document-icon">
              <component :is="getFileIcon(file.fileFormat)" />
            </div>
            <div class="document-ext">{{ file.fileFormat?.toUpperCase() }}</div>
          </div>

          <!-- 收藏标识 -->
          <div v-if="file.isFavorite" class="favorite-badge">
            <tiny-icon-heart-fill />
          </div>

          <!-- AI标签标识 -->
          <div v-if="file.aiTags" class="ai-badge">
            <tiny-icon-magic />
          </div>

          <!-- 云同步状态 -->
          <div v-if="file.syncStatus" :class="file.syncStatus" class="sync-status">
            <tiny-icon-cloud v-if="file.syncStatus === 'synced'" />
            <tiny-icon-cloud-upload v-else-if="file.syncStatus === 'uploading'" />
            <tiny-icon-warning v-else-if="file.syncStatus === 'error'" />
          </div>
        </div>

        <!-- 文件信息 -->
        <div v-if="viewMode === 'list' || showInfo" class="media-info">
          <div class="info-main">
            <div class="file-name">{{ file.originalFileName }}</div>
            <div class="file-meta">
              <span class="file-size">{{ formatFileSize(file.fileSize) }}</span>
              <span class="file-date">{{ formatDate(file.createTime) }}</span>
            </div>
          </div>

          <!-- AI标签 -->
          <div v-if="file.aiTags && showAiTags" class="ai-tags">
            <span
              v-for="tag in file.aiTags.split(',').slice(0, 2)"
              :key="tag"
              class="ai-tag"
            >
              {{ tag.trim() }}
            </span>
            <span v-if="file.aiTags.split(',').length > 2" class="more-tags">
              +{{ file.aiTags.split(',').length - 2 }}
            </span>
          </div>

          <!-- 快捷操作 -->
          <div v-if="viewMode === 'list'" class="quick-actions">
            <button
              class="quick-action"
              @click.stop="toggleFavorite(file)"
            >
              <tiny-icon-heart v-if="!file.isFavorite" />
              <tiny-icon-heart-fill v-else />
            </button>
            <button
              class="quick-action"
              @click.stop="shareFile(file)"
            >
              <tiny-icon-share />
            </button>
            <button
              class="quick-action"
              @click.stop="showMoreActions(file)"
            >
              <tiny-icon-more />
            </button>
          </div>
        </div>

        <!-- 上传进度 -->
        <div v-if="file.uploadProgress !== undefined" class="upload-progress">
          <div class="progress-bg">
            <div
              :style="{ width: file.uploadProgress + '%' }"
              class="progress-fill"
            ></div>
          </div>
          <span class="progress-text">{{ file.uploadProgress }}%</span>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">
        <tiny-icon-image-text />
      </div>
      <div class="empty-title">暂无媒体文件</div>
      <div class="empty-subtitle">
        {{ emptyMessage || '点击上传按钮添加您的第一个文件' }}
      </div>
      <button v-if="showUploadButton" class="upload-btn" @click="$emit('upload')">
        <tiny-icon-plus />
        上传文件
      </button>
    </div>

    <!-- 无限滚动加载器 -->
    <div
      v-if="hasMore && !loading"
      ref="loadMoreTrigger"
      class="load-more-trigger"
    >
      <tiny-loading size="small" />
      <span>加载更多...</span>
    </div>

    <!-- 选择模式底部工具栏 -->
    <transition name="toolbar-slide">
      <div v-if="selectionMode && selectedFiles.length > 0" class="selection-toolbar">
        <div class="toolbar-info">
          已选择 {{ selectedFiles.length }} 项
        </div>
        <div class="toolbar-actions">
          <button class="toolbar-btn" @click="$emit('batch-favorite')">
            <tiny-icon-heart />
          </button>
          <button class="toolbar-btn" @click="$emit('batch-share')">
            <tiny-icon-share />
          </button>
          <button class="toolbar-btn" @click="$emit('batch-ai-tag')">
            <tiny-icon-magic />
          </button>
          <button class="toolbar-btn danger" @click="$emit('batch-delete')">
            <tiny-icon-delete />
          </button>
        </div>
        <button class="cancel-selection" @click="cancelSelection">
          取消
        </button>
      </div>
    </transition>

    <!-- 长按菜单 -->
    <transition name="context-menu">
      <div
        v-if="contextMenu.visible"
        :style="{
          top: contextMenu.y + 'px',
          left: contextMenu.x + 'px'
        }"
        class="context-menu"
      >
        <button
          v-for="action in contextMenuActions"
          :key="action.name"
          class="context-menu-item"
          @click="handleContextAction(action)"
        >
          <component :is="action.icon" />
          <span>{{ action.label }}</span>
        </button>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

// Props
interface Props {
  mediaFiles: any[]
  loading?: boolean
  hasMore?: boolean
  viewMode?: 'grid' | 'list'
  selectionMode?: boolean
  selectedFiles?: number[]
  showFilters?: boolean
  showInfo?: boolean
  showAiTags?: boolean
  showUploadButton?: boolean
  emptyMessage?: string
}

const props = withDefaults(defineProps<Props>(), {
  mediaFiles: () => [],
  loading: false,
  hasMore: false,
  viewMode: 'grid',
  selectionMode: false,
  selectedFiles: () => [],
  showFilters: true,
  showInfo: false,
  showAiTags: true,
  showUploadButton: true
})

// Emits
const emit = defineEmits<{
  'item-click': [file: any, index: number]
  'selection-change': [fileIds: number[]]
  'load-more': []
  'filter-change': [filter: string]
  'sort-change': [sort: string]
  'view-change': [view: string]
  'upload': []
  'batch-favorite': []
  'batch-share': []
  'batch-ai-tag': []
  'batch-delete': []
  'toggle-favorite': [file: any]
  'share-file': [file: any]
  'context-action': [action: string, file: any]
}>()

// 响应式数据
const loadMoreTrigger = ref<HTMLElement>()
const activeFilter = ref('all')
const currentSort = ref('createTime')
const localViewMode = ref(props.viewMode)
const touchTimer = ref<NodeJS.Timeout>()
const contextMenu = ref({
  visible: false,
  x: 0,
  y: 0,
  file: null as any
})

// 筛选和排序选项
const filterTabs = [
  { value: 'all', label: '全部', icon: 'tiny-icon-folder' },
  { value: 'image', label: '图片', icon: 'tiny-icon-image' },
  { value: 'video', label: '视频', icon: 'tiny-icon-video' },
  { value: 'audio', label: '音频', icon: 'tiny-icon-music' },
  { value: 'document', label: '文档', icon: 'tiny-icon-file' }
]

const sortOptions = [
  { value: 'createTime', label: '最新' },
  { value: 'fileName', label: '名称' },
  { value: 'fileSize', label: '大小' },
  { value: 'viewCount', label: '热度' }
]

const contextMenuActions = [
  { name: 'preview', label: '预览', icon: 'tiny-icon-view' },
  { name: 'favorite', label: '收藏', icon: 'tiny-icon-heart' },
  { name: 'share', label: '分享', icon: 'tiny-icon-share' },
  { name: 'ai-tag', label: 'AI标签', icon: 'tiny-icon-magic' },
  { name: 'download', label: '下载', icon: 'tiny-icon-download' },
  { name: 'delete', label: '删除', icon: 'tiny-icon-delete' }
]

// 方法
const setFilter = (filter: string) => {
  activeFilter.value = filter
  emit('filter-change', filter)
}

const toggleSort = () => {
  const currentIndex = sortOptions.findIndex(s => s.value === currentSort.value)
  const nextIndex = (currentIndex + 1) % sortOptions.length
  currentSort.value = sortOptions[nextIndex].value
  emit('sort-change', currentSort.value)
}

const toggleView = () => {
  localViewMode.value = localViewMode.value === 'grid' ? 'list' : 'grid'
  emit('view-change', localViewMode.value)
}

const handleItemClick = (file: any, index: number) => {
  if (props.selectionMode) {
    toggleSelection(file.fileId)
  } else {
    emit('item-click', file, index)
  }
}

const handleTouchStart = (file: any, event: TouchEvent) => {
  if (!props.selectionMode) {
    touchTimer.value = setTimeout(() => {
      // 长按开启选择模式或显示上下文菜单
      showContextMenu(file, event.touches[0])
    }, 500)
  }
}

const handleTouchEnd = () => {
  if (touchTimer.value) {
    clearTimeout(touchTimer.value)
  }
}

const showContextMenu = (file: any, touch: Touch) => {
  contextMenu.value = {
    visible: true,
    x: touch.clientX,
    y: touch.clientY,
    file
  }

  // 添加全局点击监听器关闭菜单
  document.addEventListener('click', hideContextMenu, { once: true })
}

const hideContextMenu = () => {
  contextMenu.value.visible = false
}

const handleContextAction = (action: any) => {
  emit('context-action', action.name, contextMenu.value.file)
  hideContextMenu()
}

const toggleSelection = (fileId: number) => {
  const selected = [...props.selectedFiles]
  const index = selected.indexOf(fileId)

  if (index > -1) {
    selected.splice(index, 1)
  } else {
    selected.push(fileId)
  }

  emit('selection-change', selected)
}

const cancelSelection = () => {
  emit('selection-change', [])
}

const toggleFavorite = (file: any) => {
  emit('toggle-favorite', file)
}

const shareFile = (file: any) => {
  emit('share-file', file)
}

const showMoreActions = (file: any) => {
  // 显示更多操作菜单
}

const formatFileSize = (bytes: number): string => {
  const sizes = ['B', 'KB', 'MB', 'GB']
  if (bytes === 0) return '0 B'
  const i = Math.floor(Math.log(bytes) / Math.log(1024))
  return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i]
}

const formatDate = (date: string): string => {
  const now = new Date()
  const fileDate = new Date(date)
  const diffTime = now.getTime() - fileDate.getTime()
  const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))

  if (diffDays === 0) {
    return '今天'
  } else if (diffDays === 1) {
    return '昨天'
  } else if (diffDays < 7) {
    return `${diffDays}天前`
  } else {
    return fileDate.toLocaleDateString('zh-CN')
  }
}

const formatDuration = (seconds: number): string => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

const getFileIcon = (format: string) => {
  const iconMap: Record<string, string> = {
    pdf: 'tiny-icon-file-pdf',
    doc: 'tiny-icon-file-word',
    docx: 'tiny-icon-file-word',
    xls: 'tiny-icon-file-excel',
    xlsx: 'tiny-icon-file-excel',
    ppt: 'tiny-icon-file-ppt',
    pptx: 'tiny-icon-file-ppt',
    txt: 'tiny-icon-file-text',
    zip: 'tiny-icon-file-zip',
    rar: 'tiny-icon-file-zip'
  }
  return iconMap[format] || 'tiny-icon-file'
}

const handleImageError = (event: Event) => {
  const img = event.target as HTMLImageElement
  img.src = '/placeholder-image.png' // 设置默认占位图
}

// 无限滚动
useIntersectionObserver(
  loadMoreTrigger,
  ([{ isIntersecting }]) => {
    if (isIntersecting && props.hasMore && !props.loading) {
      emit('load-more')
    }
  },
  { threshold: 0.1 }
)

// 清理定时器
onUnmounted(() => {
  if (touchTimer.value) {
    clearTimeout(touchTimer.value)
  }
})
</script>

<style lang="scss" scoped>
// 注意：这里使用了旧版SASS函数lighten()，虽然有deprecation警告但仍可正常工作
.mobile-media-grid {
  .filter-bar {
    position: sticky;
    top: 0;
    z-index: $z-index-sticky;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: $spacing-3;
    margin: 0 (-$spacing-4) $spacing-4;

    .filter-tabs {
      display: flex;
      gap: $spacing-2;
      margin-bottom: $spacing-3;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

      .filter-tab {
        display: flex;
        align-items: center;
        gap: $spacing-1;
        padding: $spacing-2 $spacing-3;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba($gray-300, 0.5);
        border-radius: $radius-full;
        color: $gray-600;
        font-size: $font-size-sm;
        white-space: nowrap;
        cursor: pointer;
        transition: all $duration-fast ease;

        &.active {
          background: $primary-500;
          border-color: $primary-500;
          color: white;
        }
      }
    }

    .filter-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .filter-btn {
        display: flex;
        align-items: center;
        gap: $spacing-1;
        padding: $spacing-2 $spacing-3;
        background: transparent;
        border: 1px solid rgba($gray-300, 0.5);
        border-radius: $radius-md;
        color: $gray-600;
        font-size: $font-size-sm;
        cursor: pointer;
        transition: all $duration-fast ease;

        &:hover {
          background: rgba($gray-500, 0.1);
        }
      }
    }
  }

  .loading-skeleton {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-3;

    .skeleton-item {
      aspect-ratio: 1;
      background: linear-gradient(
        90deg,
        rgba($gray-200, 0.5) 25%,
        rgba($gray-100, 0.5) 50%,
        rgba($gray-200, 0.5) 75%
      );
      background-size: 200% 100%;
      border-radius: $radius-lg;
      animation: skeleton-loading 1.5s infinite;

      &.list {
        aspect-ratio: 4/1;
      }
    }
  }

  .media-grid {
    display: grid;
    gap: $spacing-3;

    &.grid {
      grid-template-columns: repeat(2, 1fr);

      @media (min-width: $breakpoint-sm) {
        grid-template-columns: repeat(3, 1fr);
      }

      @media (min-width: $breakpoint-lg) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    &.list {
      grid-template-columns: 1fr;
    }

    &.selection-mode .media-item {
      .selection-checkbox {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .media-item {
      position: relative;
      background: rgba(255, 255, 255, 0.8);
      border-radius: $radius-lg;
      overflow: hidden;
      cursor: pointer;
      transition: all $duration-fast ease;
      animation: slideInUp $duration-normal var(--delay) both;

      &:hover {
        transform: translateY(-2px);
        box-shadow: $shadow-lg;
      }

      &.selected {
        border: 2px solid $primary-500;
        transform: scale(0.95);
      }

      &.has-ai-tags::after {
        content: '';
        position: absolute;
        top: $spacing-2;
        left: $spacing-2;
        width: 6px;
        height: 6px;
        background: $neon-blue;
        border-radius: $radius-full;
        box-shadow: 0 0 8px $neon-blue;
      }

      .selection-checkbox {
        position: absolute;
        top: $spacing-2;
        left: $spacing-2;
        z-index: 10;
        opacity: 0;
        pointer-events: none;
        transition: all $duration-fast ease;

        .checkbox-inner {
          width: 24px;
          height: 24px;
          background: rgba(255, 255, 255, 0.9);
          border: 2px solid $gray-300;
          border-radius: $radius-sm;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all $duration-fast ease;

          &.checked {
            background: $primary-500;
            border-color: $primary-500;
            color: white;
          }
        }
      }

      .media-preview {
        position: relative;
        aspect-ratio: 1;
        overflow: hidden;

        .grid & {
          aspect-ratio: 1;
        }

        .list & {
          aspect-ratio: 16/9;
          width: 120px;
          flex-shrink: 0;
        }

        .media-image,
        .video-thumbnail {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform $duration-normal ease;
        }

        .video-preview {
          position: relative;
          width: 100%;
          height: 100%;
          background: $gray-100;
          display: flex;
          align-items: center;
          justify-content: center;

          .video-placeholder {
            font-size: 48px;
            color: $gray-400;
          }

          .video-duration {
            position: absolute;
            bottom: $spacing-2;
            right: $spacing-2;
            padding: 2px $spacing-1;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: $radius-sm;
            font-size: $font-size-xs;
          }

          .play-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 48px;
            height: 48px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: $radius-full;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            opacity: 0;
            transition: opacity $duration-fast ease;
          }

          &:hover .play-overlay {
            opacity: 1;
          }
        }

        .audio-preview {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, $media-audio 0%, lighten($media-audio, 20%) 100%);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: white;

          .audio-icon {
            font-size: 32px;
            margin-bottom: $spacing-2;
          }

          .audio-waveform {
            display: flex;
            gap: 2px;
            margin-bottom: $spacing-2;

            .wave-bar {
              width: 3px;
              background: rgba(255, 255, 255, 0.8);
              border-radius: $radius-full;
              animation: wave-animation 1.5s infinite;

              &:nth-child(1) { height: 12px; animation-delay: 0s; }
              &:nth-child(2) { height: 8px; animation-delay: 0.1s; }
              &:nth-child(3) { height: 16px; animation-delay: 0.2s; }
              &:nth-child(4) { height: 6px; animation-delay: 0.3s; }
              &:nth-child(5) { height: 10px; animation-delay: 0.4s; }
            }
          }

          .audio-duration {
            font-size: $font-size-xs;
            opacity: 0.9;
          }
        }

        .document-preview {
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, $media-document 0%, lighten($media-document, 20%) 100%);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: white;

          .document-icon {
            font-size: 32px;
            margin-bottom: $spacing-2;
          }

          .document-ext {
            font-size: $font-size-sm;
            font-weight: $font-weight-semibold;
            padding: 2px $spacing-2;
            background: rgba(255, 255, 255, 0.2);
            border-radius: $radius-sm;
          }
        }

        .favorite-badge,
        .ai-badge,
        .sync-status {
          position: absolute;
          top: $spacing-2;
          right: $spacing-2;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: $radius-full;
          color: white;
          font-size: 12px;
        }

        .favorite-badge {
          background: $error;
        }

        .ai-badge {
          background: $neon-purple;
          box-shadow: 0 0 10px rgba($neon-purple, 0.5);
        }

        .sync-status {
          &.synced { background: $success; }
          &.uploading {
            background: $info;
            animation: pulse 1.5s infinite;
          }
          &.error { background: $warning; }
        }
      }

      .media-info {
        padding: $spacing-3;

        .list & {
          display: flex;
          flex-direction: column;
          gap: $spacing-2;
          flex: 1;
        }

        .info-main {
          .file-name {
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            color: $gray-800;
            margin-bottom: $spacing-1;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;

            .list & {
              -webkit-line-clamp: 1;
            }
          }

          .file-meta {
            display: flex;
            gap: $spacing-2;
            font-size: $font-size-xs;
            color: $gray-500;
          }
        }

        .ai-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          margin-top: $spacing-2;

          .ai-tag {
            padding: 2px $spacing-1;
            background: rgba($primary-500, 0.1);
            color: $primary-600;
            border-radius: $radius-sm;
            font-size: 10px;
          }

          .more-tags {
            padding: 2px $spacing-1;
            background: rgba($gray-500, 0.1);
            color: $gray-600;
            border-radius: $radius-sm;
            font-size: 10px;
          }
        }

        .quick-actions {
          display: flex;
          gap: $spacing-2;
          margin-top: $spacing-2;

          .quick-action {
            width: 32px;
            height: 32px;
            background: transparent;
            border: 1px solid rgba($gray-300, 0.5);
            border-radius: $radius-md;
            color: $gray-500;
            cursor: pointer;
            transition: all $duration-fast ease;

            &:hover {
              background: rgba($gray-500, 0.1);
              color: $gray-700;
            }
          }
        }
      }

      .upload-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: $spacing-2;
        background: rgba(0, 0, 0, 0.8);
        color: white;

        .progress-bg {
          height: 4px;
          background: rgba(255, 255, 255, 0.3);
          border-radius: $radius-full;
          overflow: hidden;
          margin-bottom: $spacing-1;

          .progress-fill {
            height: 100%;
            background: $success;
            transition: width $duration-fast ease;
          }
        }

        .progress-text {
          font-size: $font-size-xs;
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: $spacing-12 $spacing-4;
    color: $gray-500;

    .empty-icon {
      font-size: 64px;
      margin-bottom: $spacing-4;
      opacity: 0.5;
    }

    .empty-title {
      font-size: $font-size-lg;
      font-weight: $font-weight-semibold;
      margin-bottom: $spacing-2;
      color: $gray-700;
    }

    .empty-subtitle {
      font-size: $font-size-sm;
      margin-bottom: $spacing-6;
      line-height: 1.5;
    }

    .upload-btn {
      display: inline-flex;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-3 $spacing-6;
      background: $gradient-primary;
      border: none;
      border-radius: $radius-full;
      color: white;
      font-size: $font-size-base;
      font-weight: $font-weight-medium;
      cursor: pointer;
      transition: all $duration-fast ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: $shadow-lg;
      }
    }
  }

  .load-more-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: $spacing-2;
    padding: $spacing-6;
    color: $gray-500;
    font-size: $font-size-sm;
  }

  .selection-toolbar {
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: $spacing-4;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    z-index: $z-index-fixed;

    .toolbar-info {
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      color: $gray-700;
    }

    .toolbar-actions {
      display: flex;
      gap: $spacing-2;

      .toolbar-btn {
        width: 44px;
        height: 44px;
        background: rgba($gray-500, 0.1);
        border: none;
        border-radius: $radius-full;
        color: $gray-600;
        cursor: pointer;
        transition: all $duration-fast ease;

        &:hover {
          background: rgba($gray-500, 0.2);
        }

        &.danger {
          color: $error;
        }
      }
    }

    .cancel-selection {
      background: transparent;
      border: none;
      color: $primary-500;
      font-size: $font-size-sm;
      font-weight: $font-weight-medium;
      cursor: pointer;
      padding: $spacing-2;
    }
  }

  .context-menu {
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: $radius-lg;
    box-shadow: $shadow-xl;
    z-index: $z-index-popover;
    min-width: 150px;
    overflow: hidden;

    .context-menu-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: $spacing-3;
      padding: $spacing-3 $spacing-4;
      background: transparent;
      border: none;
      color: $gray-700;
      font-size: $font-size-sm;
      cursor: pointer;
      transition: background $duration-fast ease;

      &:hover {
        background: rgba($gray-500, 0.1);
      }

      &:last-child {
        color: $error;
      }
    }
  }
}

// 动画
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wave-animation {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.5); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

// 过渡效果
.toolbar-slide-enter-active,
.toolbar-slide-leave-active {
  transition: transform $duration-normal ease;
}

.toolbar-slide-enter-from,
.toolbar-slide-leave-to {
  transform: translateY(100%);
}

.context-menu-enter-active,
.context-menu-leave-active {
  transition: all $duration-fast ease;
}

.context-menu-enter-from,
.context-menu-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

// 暗色主题
[data-theme="dark"] {
  .mobile-media-grid {
    .filter-bar {
      background: rgba(0, 0, 0, 0.8);
      border-color: rgba(255, 255, 255, 0.1);

      .filter-tab {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
        color: $gray-300;

        &.active {
          background: $primary-500;
          border-color: $primary-500;
        }
      }

      .filter-btn {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.1);
        color: $gray-300;
      }
    }

    .media-item {
      background: rgba(255, 255, 255, 0.1);

      .media-info {
        .file-name {
          color: $gray-200;
        }
      }
    }

    .selection-toolbar {
      background: rgba(0, 0, 0, 0.8);
      border-color: rgba(255, 255, 255, 0.1);

      .toolbar-info {
        color: $gray-300;
      }
    }

    .context-menu {
      background: rgba(0, 0, 0, 0.9);

      .context-menu-item {
        color: $gray-300;

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .empty-state {
      .empty-title {
        color: $gray-300;
      }
    }
  }
}
</style>
